<!--/**
* @author xuyh0817
* @email xuyh0817@foxmail.com
* @date 2022-02-16 15:58
* @version 2.0.0
* @doc todo
* @website todo
* @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
*/
-->
<template>
  <a-form-model
    ref="xFormModel"
    key="xForm"
    :model="formData"
    v-bind="formProps"
    class="x-render-form"
  >
    <slot name="form-error-tip"
          :activeFormOptions="activeFormOptions"
          :formProps="formProps"
          :formErrorColor="formErrorColor"
          :formErrorText="formErrorText"
    >
      <h1 v-if="activeFormOptions.length === 0" class="x-render-error-tip" :style="{color:formErrorColor}">
        {{ formErrorText }}
      </h1>
    </slot>
    <!--默认插槽-->
    <slot
      :activeFormOptions="activeFormOptions"
      :formProps="formProps"
      name="form-header"/>
    <slot
      :activeFormOptions="activeFormOptions"
      :formProps="formProps"
      name="form-body"
    >
      <x-render-form-row :data="activeFormOptions"
                         @change="changeHandler"
                         @custom-event="customEventHandler">
      </x-render-form-row>
    </slot>
    <!--footer插槽-->
    <slot :activeFormOptions="activeFormOptions"
          :formProps="formProps"
          name="form-footer"/>
  </a-form-model>
</template>

<script>

import {COMPONENT_TYPE, CUSTOM_EVENT_TYPE} from '../../constants'
import methods from './methods'

export default {
  name: COMPONENT_TYPE.FORM,
  model: {
    // v-model 配置
    prop: 'formData',
    event: CUSTOM_EVENT_TYPE.FORM_CHANGE
  },
  provide() {
    return {
      // 给子级提供的父级实例
      xRenderForm: this
    }
  },
  props: {
    // 表单配置
    formOptions: {
      type: Array,
      default() {
        return []
      }
    },
    // 表单数据
    formData: {
      type: Object,
      default() {
        return {}
      }
    },
    // 表单全局配置
    formProps: {
      type: Object,
      default() {
        return {
          // 全部禁用
          disabled: false,
          // 属性变化，进行验证
          validateFieldOnChange: true,
          // 表单错误提示文字
          errorText: '未输入任何内容',
          // 表单错误提示文字颜色
          errorColor: '#409eff'
        }
      }
    }
  },
  data() {
    return {
      //　当前经过处理的表单配置项数据
      activeFormOptions: [],
      // 经过扁平化处理后的表单配置项数据，方便查找
      flatFormOptionMap: {}
    }
  },
  computed: {
    // 禁用表单项
    formDisabled: {
      get() {
        const {formProps} = this
        const {disabled} = formProps || {}
        return disabled === undefined ? false : !!disabled
      }
    },
    // 表单变化进行验证
    formChangeValidateField: {
      get() {
        const {formProps} = this
        const {validateFieldOnChange} = formProps || {}
        return validateFieldOnChange === undefined ? true : !!validateFieldOnChange
      }
    },
    // 表单错误提示文字
    formErrorText: {
      get() {
        const {formProps} = this
        const {errorText} = formProps || {}
        return errorText || '未输入任何内容'
      }
    },
    // 表单错误提示文字颜色
    formErrorColor: {
      get() {
        const {formProps} = this
        const {errorColor} = formProps || {}
        return errorColor || '#409eff'
      }
    }
  },
  watch: {
    formOptions: {
      immediate: true,
      deep: true,
      handler() {
        const flatFormOptionMap = this.initActiveFormOptions()
        this.initFormData(flatFormOptionMap)
        this.flatFormOptionMap = flatFormOptionMap
      }
    }
  },
  methods
}
</script>

<style scoped lang="css">
.x-render-form {
  position: relative;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
}

.x-render-error-tip {
  position: absolute;
  top: 130px;
  left: calc(50% - 100px);
}
</style>
